<template>
	<view>
		<uni-nav-bar @clickLeft="fanhui" left-icon="left" left-text="返回" title="报修"/>
		<view class="xiaoquda">
			<!-- 小区 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">类型</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" range-key="name" :range="typeList">
						<view class="uni-input">{{typeLabel}}
							<image class="you-img" src="@/static/images/index/右.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<!-- 楼栋房号 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					报修地址
				</view>
				<view class="uni-list-cell-db">
					<view class="" @click="selectbuilding">
						清水湾2号楼1单元1301
						<image class="you-img" src="@/static/images/index/右.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 住户类型 -->
			<view class="uni-list-cell" style="border-bottom: none;">
				<view class="uni-list-cell-left">
					联系电话
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChanges">
						<view class="uni-input">17277775948
							<image class="you-img" src="@/static/images/index/右.png" mode=""></image>
						</view>
					</picker>	
				</view>
			</view>
		</view>
		<view class="input">
			<input type="text" placeholder="请输入">
		</view>
		<view>
			<!-- {{formData.images}} -->
		</view>
		<!-- 上传图片 -->
		<!-- <upload @change="formData.images = $event" /> -->
		<upload  />
		
		<view class="queren">确认保修</view>
	</view>
</template>


<script>
	import { repairstypelist} from '@/apis/redir.js'
	export default {
		data() {
			return {
				typeName:'',
				formData:{
					id: 0,
					address: "",//地址
					content: "",//内容
					tel: "",//电话
					type: 0,//类型id
					state:1,//初始状态
					images: []//图片路径列表
				},
				typeList:[]//类型备选项
			}
		},
		onShow(){
			repairstypelist().then(({ data: {list} })=>{
				this.typeList = list
			})
		},
		computed:{
			typeLabel(){
				//设置过类型则显示类型名称，否则显示请选择报修类型
				if(this.formData.type > 0){
					return this.typeList.find(item => item.id === this.formData.type).name;
				}else{
					return '请选择报修类型'
				}
			}
		},
		methods: {
			fanhui(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			selectbuilding(){
				console.log(111);
			},
			bindPickerChange(e){
				const type = this.typeList[e.detail.value];
				this.formData.type = type.id;
			},
			bindPickerChanges(e){
				console.log(e);
			}
		}
	}
</script>

<style lang="less">
@import url('@/static/css/index/Repair-Application/Repair-Application.css');

</style>
